<div *ngIf="task$ | async as task; else loading">

  <div>
    <div class="row task-summary-row">
      <div class="col-md-3">
        <strong>Definition:</strong>
      </div>
      <div class="col-md-21">
        <app-stream-dsl>
          {{ task.taskDefinition.dslText }}
        </app-stream-dsl>
      </div>
    </div>
    <div class="row task-summary-row">
      <div class="col-md-3">
        <strong>Status:</strong>
      </div>
      <div class="col-md-21">
        <app-task-status [taskDefinition]="task.taskDefinition"></app-task-status>
      </div>
    </div>
    <div class="row task-summary-row" *ngIf="task.apps.length > 0">
      <div class="col-md-3">
        <strong>Applications:</strong>
      </div>
      <div class="col-md-21">
        <table class="table table-apps table-hover table-actions">
          <thead>
          <tr>
            <th>Name</th>
            <th>Type</th>
            <th>&nbsp;</th>
          </tr>
          </thead>
          <tbody>
            <tr *ngFor="let app of task.apps">
              <td>
                <strong>{{ app.name }}</strong>
                <span *ngIf="app.origin !== app.name">
                  ({{ app.origin }})
                </span>
              </td>
              <td>
                <app-type [application]="app"></app-type>
              </td>
              <td class="table-actions" width="10px" nowrap="">
                <div class="actions" role="group">
                  <a routerLink="/apps/{{ app.type }}/{{ app.origin }}" class="btn btn-default" title="Details">
                    <span class="glyphicon glyphicon-search"></span>
                  </a>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<ng-template #loading>
  <app-loader></app-loader>
</ng-template>
